<template>
	<view>
		<view class="head-box">
			<image src="/pages/more/static/icon/banner@3x.png" mode="widthFix"></image>
			<view class="text" v-show="step === 0">
				<view>轻松三步</view>
				<view>最专业的经纪人帮您找房</view>
				<view class="normal">定制推荐/极速响应/专属推荐</view>
			</view>
			<view class="text" v-show="step === 1 || step === 2">
				<view>告诉我们您的偏好</view>
				<view>为您推荐最合适的房子</view>
				<view class="normal">定制推荐/极速响应/专属推荐</view>
			</view>
			<view class="text" v-show="step === 3">
				<view>完成最后一步</view>
				<view>即将为您呈现定制房源</view>
			</view>
		</view>
		<view class="step-form">
			<!-- 首页 -->
			<template v-if="step === 0">
				<view class="line-box">
					<view class="select u-flex u-flex-wrap sum2">
						<view :class="[type === 0 && 'active']" @click="type = 0">委托买房</view>
						<view :class="[type === 1 && 'active']" @click="type = 1">委托租房</view>
					</view>
				</view>
				<!-- 买房 -->
				<template v-if="type == 0">
					<view class="line-box">
						<view class="title u-flex">
							<text>{{compType == 0 ? '您的首付预算是多少？' : '您的总预算是多少？'}}</text>
							<view class="computed-type u-flex">
								<view :class="[compType === 0 && 'active']" @click="compType = 0">按首付</view>
								<view :class="[compType === 1 && 'active']" @click="compType = 1">按总价</view>
							</view>
						</view>
						<view class="slider-box">
							<view class="slider-val">{{value * 5}}万</view>
							<u-slider min="4" max="100" height="37" block-color="#ff3737" inactive-color="#ffeaea" active-color="#ff3737" v-model="value" :ablock-style="blockStyle"></u-slider>
							<view class="u-flex slider-price">
								<view>20万</view>
								<view>100万</view>
								<view>200万</view>
								<view>300万</view>
								<view>400万+</view>
							</view>
						</view>
					</view>
					<view class="line-box">
						<view class="select u-flex u-flex-wrap sum2">
							<view :class="[firstTao === 0 && 'active']" @click="firstTao = 0">首套</view>
							<view :class="[firstTao === 1 && 'active']" @click="firstTao = 1">二套</view>
						</view>
					</view>
				</template>
				<!-- 租房 -->
				<template v-if="type == 1">
					<view class="line-box">
						<view class="title u-flex">
							<text>您的租房预算是多少?</text>
						</view>
						<view class="slider-box">
							<view class="slider-val">{{value * 50}}</view>
							<u-slider min="10" max="100" height="37" block-color="#ff3737" inactive-color="#ffeaea" active-color="#ff3737" v-model="value" :ablock-style="blockStyle"></u-slider>
							<view class="u-flex slider-price" style="padding-right: 0;">
								<view>500元</view>
								<view>1500元</view>
								<view>2500元</view>
								<view>3500元</view>
								<view>4500元+</view>
							</view>
						</view>
					</view>
				</template>
				<view class="line-box">
					<u-button shape="circle" type="primary" @click="step = 1">下一步</u-button>
				</view>
			</template>
			<!-- 第一步 偏好 -->
			<template v-if="step === 1">
				<!-- 买房 -->
				<template v-if="type === 0">
					<view class="line-box">
						<view class="title">
							<text>您想住新房还是二手房？</text>
						</view>
						<view class="select u-flex u-flex-wrap sum3">
							<view :class="[zuType === 0 && 'active']" @click="zuType = 0">二手房</view>
							<view :class="[zuType === 1 && 'active']" @click="zuType = 1">新房</view>
							<view :class="[zuType === 2 && 'active']" @click="zuType = 2">不限</view>
						</view>
					</view>
					<view class="line-box">
						<view class="title">
							<text>您想住几房？</text>
						</view>
						<view class="select u-flex u-flex-wrap sum3">
							<view :class="{active:housetype === index}" @click="housetype = index" v-for="(item,index) in com_housetype || []" :key="item.id">{{item.name}}</view>
						</view>
					</view>
				</template>
				<!-- 租房 -->
				<template v-if="type === 1">
					<view class="line-box">
						<view class="title">
							<text>您租房的偏好？</text>
						</view>
						<view class="select u-flex u-flex-wrap sum3">
							<view :class="[zuType === 0 && 'active']" @click="zuType = 0">整租</view>
							<view :class="[zuType === 1 && 'active']" @click="zuType = 1">合租</view>
							<view :class="[zuType === 2 && 'active']" @click="zuType = 2">不限</view>
						</view>
					</view>
					<view class="line-box">
						<view class="title">
							<text>您想住几房？</text>
						</view>
						<view class="select u-flex u-flex-wrap sum3">
							<view :class="{active:housetype === index}" @click="housetype = index" v-for="(item,index) in com_housetype || []" :key="item.id">{{item.name}}</view>
						</view>
					</view>
				</template>
				<view class="line-box">
					<view class="title">
						<text>您想要的区域？</text>
					</view>
					<view class="area u-flex" @click="showArea = !0">
						<image src="/static/icon/index-location.png"></image>
						<text class="area-text">{{area}}</text>
						<text class="iconfont icon-xiasanjiaoxing"></text>
					</view>
				</view>
				
				<view class="line-box">
					<u-button shape="circle" type="primary" @click="step = 2">下一步</u-button>
				</view>
				<city-select v-model="showArea" @city-change="cityChange"></city-select>
			</template>
			<!-- 第二步 -->
			<template v-if="step === 2">
				<!-- 买房 -->
				<template v-if="type === 0">
					<view class="line-box">
						<view class="title">
							<text>您的购房目的？</text>
						</view>
						<view class="select u-flex u-flex-wrap sum3">
							<view v-for="(item,index) in buymudi" 
								@click="buymudiIndex = index" 
								:class="[buymudiIndex == index && 'active']" :key="index">{{item}}</view>
						</view>
					</view>
					<view class="line-box">
						<view class="title">
							<text>您想要的面积？</text>
						</view>
						<view class="select u-flex u-flex-wrap sum3">
							<view v-for="(item,index) in com_area" 
								@click="buyAreaIndex = index" 
								:class="[buyAreaIndex == index && 'active']" :key="index">{{`${item.min}-${item.max}`}}</view>
						</view>
					</view>
					<view class="line-box">
						<view class="title">
							<text>您更喜欢朝向？</text>
						</view>
						<view class="select u-flex u-flex-wrap sum3">
							<view v-for="(item,index) in com_orientation" 
								@click="buyDirectionIndex = index" 
								:class="[buyDirectionIndex == index && 'active']" :key="index">{{item.name}}</view>
						</view>
					</view>
					<view class="line-box">
						<view class="title">
							<text>您更喜欢高楼层还是低楼层？</text>
						</view>
						<view class="select u-flex u-flex-wrap sum3">
							<view v-for="(item,index) in buyHeight" 
								@click="buyHeightIndex = index" 
								:class="[buyHeightIndex == index && 'active']" :key="index">{{item}}</view>
						</view>
					</view>
					<view class="line-box">
						<view class="title">
							<text>您对楼龄的要求？</text>
						</view>
						<view class="select u-flex u-flex-wrap sum3">
							<view v-for="(item,index) in buyYear" 
								@click="buyYearIndex = index" 
								:class="[buyYearIndex == index && 'active']" :key="index">{{item}}</view>
						</view>
					</view>
				</template>
				<!-- 租房 -->
				<template v-if="type === 1">
					<view class="line-box">
						<view class="title">
							<text>您租的其他要求？</text>
						</view>
						<view class="select u-flex u-flex-wrap sum3">
							<view @click="setzuOthre(index)" :class="[item.checked && 'active']" v-for="(item,index) in supportingfacilities" :key="item.id">{{item.name}}</view>
						</view>
					</view>
				</template>
				
				<view class="line-box">
					<u-button shape="circle" type="primary" @click="step = 3">下一步</u-button>
				</view>
			</template>
			<!-- 第三步 -->
			<template v-if="step === 3">
				<view class="line-box" style="padding-bottom: 0;">
					<view class="title">
						<text>姓名</text>
					</view>
					<input type="text" v-model="name" placeholder="请输入姓名" class="input"/>
				</view>
				<view class="line-box" style="padding-bottom: 0;">
					<view class="title">
						<text>手机号</text>
					</view>
					<input type="number" v-model="phone" placeholder="请输入手机号" class="input"/>
				</view>
				<view class="line-box" style="padding-bottom: 0;">
					<view class="title">
						<text>微信/QQ</text>
					</view>
					<input type="text" v-model="wxqq" placeholder="可选填" class="input"/>
				</view>
				<view class="tips u-flex">
					<image src="@/static/icon/tips.png"></image>
					<text>提示：如有不方便电话沟通的可以微信或QQ联系</text>
				</view>
				<view class="line-box">
					<view class="tips u-flex" style="padding: 100rpx 0 14rpx;">
						<image src="@/static/icon/tips.png"></image>
						<text>提示：当有符合您需求的房源时，优选经纪人将一对一为您服务</text>
					</view>
					<u-button shape="circle" type="primary" @click="submit">提交</u-button>
				</view>
			</template>
		</view>
		
	</view>
</template>

<script>
	import citySelect from './components/u-city-select.vue'
	export default {
		components:{
			citySelect
		},
		onLoad() {
			this.$u.api.renthouse.supportingfacilities().then(res=>this.supportingfacilities = res.map(item=>({...item,checked:!1})))
		},
		data() {
			return {
				// 租房配套设施
				supportingfacilities:[],
				type:0,//0买房 1租房
				step:0,//0开始 1偏好 2下一步 3提交
				compType:0,//买房计算价格 0首付 1总价
				value:0,//金额 *5
				firstTao:0,//首套 二套
				buyNum:1,//买房 房数
				area:'不限',
				showArea:!1,//地址选择默认关闭
				zuType:0,//租房类型 0 新房 1二手房 2不限
				// 买房目的
				buymudi:['刚需','结婚','养老','改善','教育','投资'],
				buymudiIndex:0,
				// 买房面积
				buyAreaIndex:0,
				// 买房朝向
				buyDirectionIndex:0,
				// 买房高低层
				buyHeight:['低楼层','中楼层','高楼层','底层','顶层'],
				buyHeightIndex:0,
				// 买房楼龄
				buyYear:['5年以内','10年以内','15年以内','20年以内','20年以上'],
				buyYearIndex:0,
				housetype:0,//房型索引值
			}
		},
		methods: {
			cityChange(e){
				this.area = `${e.area.label}`
			},
			setzuOthre(index){
				this.supportingfacilities[index].checked = !this.supportingfacilities[index].checked
			},
			submit(){
				if(!this.name){this.$u.toast('姓名不能为空');return}
				if(this.phone || this.wxqq){
					
				}else{
					this.$u.toast('联系方式不能为空');return
				}
				
				// 租房
				let zu = this.supportingfacilities.filter(item=>item.checked).map(item=>item.id)
				
				// 1租房 0买房
				this.type === 1
				? this.$u.post('/api/entrust/rent',{
					name:this.name,
					phone:this.phone,
					wxqq:this.wxqq,
					city:this.area,
					unitprice:Number(this.value * 50),
					housebaseset_housetype_ids:this.com_housetype[this.housetype].id,
					renthouse_supportingfacilities_ids:zu.toString(),
					more:`租房偏好:${this.zuType === 0 ? '整租' : (this.zuType === 1 ? '合租' : '不限')}`
				}).then(res=>{
					this.$app.jump('/pages/more/result',!0)
				})
				: this.$u.post('/api/entrust/buy',{
					name:this.name,
					phone:this.phone,
					wxqq:this.wxqq,
					downpayment:Number(this.value*5),
					housebaseset_housetype_ids:this.com_housetype[this.housetype].id,
					isnew:this.zuType,
					city:this.area,
					objective:this.buymudi[this.buymudiIndex],
					area:`${this.com_area[this.buyAreaIndex].min}-${this.com_area[this.buyAreaIndex].max}`,
					floor:this.buyHeight[this.buyHeightIndex],
					houseyear:this.buyYear[this.buyYearIndex],
					more:`是否首套:${this.firstTao === 0 ? '首套' : '二套'}__朝向:${this.com_orientation[this.buyDirectionIndex].name}`
				}).then(res=>{
					this.$app.jump('/pages/more/result',!0)
				})
			}
		}
	}
</script>

<style lang="scss">
	.head-box{
		background-color: $tc;border-radius: 0 0 40rpx 40rpx;position: relative;height: 333rpx;
		image{
			display: block;width: 100%;bottom: 0;position: absolute;left: 0;
		}
		.text{font-weight: bold;color: #fff;font-weight: bold;position: relative;font-size: 30rpx;padding: 60rpx 0 0 50rpx;line-height: 50rpx;
			.normal{font-weight: normal;}
		}
	}
	.step-form{padding: 0 30rpx;
		.line-box{border-bottom: 1rpx solid #eee;padding: 50rpx 0;
			&:last-child{border-bottom: 0;}
			.title{
				justify-content: space-between;
				text{font-weight: bold;color: #111;font-size: 30rpx;}
				.computed-type{
					background-color: #e4e4e4;font-size: 22rpx;border-radius: 100rpx;
					view{padding: 6rpx 12rpx;border-radius: 100rpx;}
					.active{background-color: #ff3737;color: #fff;}
				}
			}
			.slider-box{
				padding-top: 35rpx;
				/deep/ .u-slider__button{border-radius: 50%;width: 37rpx!important;height: 37rpx!important;box-shadow: none;border-radius:0 50% 50% 0;}
				.slider-price{justify-content: space-around;font-weight: bold;color: #111;padding: 20rpx 44rpx 20rpx 0;}
				.slider-val{text-align: center;font-weight: bold;color: #111;padding-bottom: 22rpx;}
			}
			// 位置选择
			.area{
				border: 2rpx solid #e4e4e4;border-radius: 14rpx;margin-top: 20rpx;padding: 20rpx;
				image{width: 26rpx;height: 34rpx;padding-right: 30rpx;border-right: 2rpx solid #e4e4e4;}
				.area-text{color: #666;margin-right: auto;margin-left: 20rpx;}
				.iconfont{}
			}
			.input{width: 100%;height: 80rpx;line-height: 80rpx;font-size: 30rpx;}
		}
		// 提示
		.tips{
			padding: 10rpx 0 80rpx;
			image{width: 24rpx;height: 24rpx;display: block;padding-right: 10rpx;}
			text{font-size: 24rpx;color: #666;}
		}
	}
	.select{
		justify-content: space-between;
		view{background-color: #f4f4f4;border-radius: 100rpx;line-height: 88rpx;text-align: center;font-weight: bold;font-size: 30rpx;margin-top: 20rpx;
			&.active{background-color: #ff3737;color: #fff;}
		}
		&.sum2 view{width: 48%;}
		&.sum3{
			view{width: 31%;}
			&::after{content: '';width: 31%;}
		}
	}
	.dev{
		
	}
</style>
